<template>
  <div class="employee-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input 
          v-model="filter.workId" 
          placeholder="职工号"
          style="width: 120px"
          class="filter-item"
        />
        <el-input 
          v-model="filter.name" 
          placeholder="职工姓名"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
        />
        <el-button type="primary" style="margin-left: 10px" @click="handleSearch">
          搜索 
        </el-button>
        <el-button plain style="margin-left: 15px; border-style: dashed" @click="resetFilter">
          重置 
        </el-button>
      </div>
  
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="text" :icon="CirclePlus" @click="handleAdd">新增</el-button>
      </div>
  
      <!-- 数据表格 -->
      <el-table 
        :data="tableData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <el-table-column type="selection" width="45" align="center"/>
        <el-table-column label="职工号 ▲" width="120" sortable>
          <template #default="scope">
            <span>{{ scope.row.workId  }}</span>
            <el-icon color="#409EFF" style="margin-left: 3px"><CaretTop /></el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="职工姓名" width="120"/>
        <el-table-column prop="gender" label="职工性别" width="100" align="center"/>
        <el-table-column prop="birthdate" label="出生日期" width="120"/>
        <el-table-column prop="department" label="所在系" width="200"/>
        <el-table-column prop="title" label="职称" width="120"/>
        <el-table-column prop="expertise" label="技术专长" width="150"/>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)"> 编辑</el-button>
            <el-button 
              type="text" 
              size="small" 
              style="margin-left: 10px"
              @click="handleDelete(scope.row)"> 
              删除 
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页信息 -->
      <div class="pagination-info">
        第1 期3 条，共3 条记录。
      </div>
  
      <!-- 新增/编辑对话框 -->
      <el-dialog 
        :title="formTitle" 
        v-model="dialogVisible" 
        width="600px"
        @closed="resetForm">
        <el-form :model="form" label-width="80px">
          <el-form-item label="职工号">
            <el-input v-model="form.workId"  autocomplete="off"/>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name"  autocomplete="off"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.gender"  placeholder="请选择">
              <el-option label="男" value="男"/>
              <el-option label="女" value="女"/>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker 
              v-model="form.birthdate" 
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="所在系">
            <el-input v-model="form.department"/> 
          </el-form-item>
          <el-form-item label="职称">
            <el-input v-model="form.title"/> 
          </el-form-item>
          <el-form-item label="技术专长">
            <el-input v-model="form.expertise"/> 
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { CirclePlus, CaretTop } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
 
// 筛选条件 
const filter = reactive({
  workId: '',
  name: ''
})
 
// 表格数据 
const tableData = ref([
  {
    workId: '53',
    name: '马行健',
    gender: '男',
    birthdate: '2020-01-16',
    department: '计算机科学与技术',
    title: '助教',
    expertise: '大学语文'
  },
  {
    workId: '54',
    name: '董理',
    gender: '男',
    birthdate: '2020-01-08',
    department: '计算机科学与技术',
    title: '教授',
    expertise: '高等数学'
  },
  {
    workId: '55',
    name: '杜金',
    gender: '男',
    birthdate: '2020-01-10',
    department: '计算机科学与技术',
    title: '教授',
    expertise: '大学物理'
  }
])
 
// 原始数据备份 
const originalData = ref([])
 
// 对话框状态 
const dialogVisible = ref(false)
const formTitle = ref('新增职工')
 
// 表单数据 
const form = reactive({
  workId: '',
  name: '',
  gender: '',
  birthdate: '',
  department: '',
  title: '',
  expertise: ''
})
 
// 当前编辑项的索引 
const currentItem = ref(null) 
 
// 初始化 
onMounted(() => {
  originalData.value  = JSON.parse(JSON.stringify(tableData.value)) 
})
 
// 搜索功能 
const handleSearch = () => {
  tableData.value  = originalData.value.filter(item  => {
    return (!filter.workId  || item.workId.includes(filter.workId))  &&
           (!filter.name  || item.name.includes(filter.name)) 
  })
}
 
// 重置筛选 
const resetFilter = () => {
  filter.workId  = ''
  filter.name  = ''
  tableData.value  = originalData.value  
}
 
// 新增 
const handleAdd = () => {
  formTitle.value  = '新增职工'
  currentItem.value  = null 
  dialogVisible.value  = true 
}
 
// 编辑 
const handleEdit = (item) => {
  formTitle.value  = '编辑职工信息'
  currentItem.value  = item 
  Object.assign(form,  { ...item })
  dialogVisible.value  = true 
}
 
// 删除 
const handleDelete = (item) => {
  ElMessageBox.confirm(' 确认删除该职工信息？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(i  => i.workId  === item.workId) 
    if (index !== -1) {
      tableData.value.splice(index,  1)
      ElMessage.success(' 删除成功!')
    }
  })
}
 
// 提交表单 
const submitForm = () => {
  if (currentItem.value)  {
    // 更新现有项 
    const index = tableData.value.findIndex(item  => item.workId  === currentItem.value.workId) 
    if (index !== -1) {
      tableData.value[index]  = { ...form }
    }
  } else {
    // 新增项 
    tableData.value.push({  ...form })
  }
  dialogVisible.value  = false 
  ElMessage.success(' 操作成功!')
  originalData.value  = JSON.parse(JSON.stringify(tableData.value)) 
}
 
// 重置表单 
const resetForm = () => {
  Object.keys(form).forEach(key  => {
    form[key] = ''
  })
  currentItem.value  = null 
}
</script>
 
<style scoped>
.employee-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.action-buttons {
  margin: 15px 0 25px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 12px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.pagination-info {
  margin-top: 20px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}
</style>